<template>
  <!-- loading -->
  <van-loading type="spinner" v-if="!isShow" vertical size="30px" color="#969799" style="margin-top: 10vh;">加载中...
  </van-loading>

  <div class="game-rank-container" v-else>
    <van-tabs v-model:active="active" @click-tab="onClickTab" sticky offset-top="46px" :color="tabsBgc"
      background="#fff" :title-active-color="tabsBgc" animated>
      <van-tab title="PC">
        <template #title>
          <van-icon name="tv-o" style="margin-right: 5px;" />PC
        </template>
        <pc-game-goods></pc-game-goods>
      </van-tab>
      <van-tab title="Switch">
        <template #title>
          <van-icon name="send-gift-o" style="margin-right: 5px;" />Switch
        </template>
        <switch-game-goods></switch-game-goods>
      </van-tab>
      <van-tab title="PSN">
        <template #title>
          <van-icon name="fire-o" style="margin-right: 5px;" />PSN
        </template>
        <psn-game-goods></psn-game-goods>
      </van-tab>
      <van-tab title="Xbox">
        <template #title>
          <van-icon name="diamond-o" style="margin-right: 5px;" />Xbox
        </template>
        <xbox-game-goods></xbox-game-goods>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import PcGameGoods from './PcGameGoods.vue';
import SwitchGameGoods from './SwitchGameGoods.vue';
import PsnGameGoods from './PsnGameGoods.vue';
import XboxGameGoods from './XboxGameGoods.vue';

import { ref } from 'vue';
const active = ref(0);
const isShow = ref(false)
setTimeout(() => {
  isShow.value = true
}, 500)

const tabsBgc = ref('#64696d')
const onClickTab = ({ title }) => {
  if (title === 'PC') {
    tabsBgc.value = '#64696d'
  } else if (title === 'Switch') {
    tabsBgc.value = '#E60012'
  } else if (title === 'PSN') {
    tabsBgc.value = '#008ae3'
  } else if (title === 'Xbox') {
    tabsBgc.value = 'green'
  }
}

</script>

<style scoped>
.game-rank-container {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
